<template>
  <div id="myhome">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 搜索模块 -->
      <van-sticky>
        <my-search></my-search>
      </van-sticky>
      <!-- 轮播图 -->
      <my-swiper :images="bannerImages"></my-swiper>
      <!-- 导航 -->
      <my-navbar :category="category"></my-navbar>
      <!-- 通知栏 -->
      <my-notice></my-notice>
      <!-- 推荐 -->

      <my-recommend :recommend="recommend"></my-recommend>
      <!-- 电梯层 -->
      <my-floor :floors="floor1" :floorName="floorName.floor1"></my-floor>
      <my-floor :floors="floor2" :floorName="floorName.floor2"></my-floor>
      <my-floor :floors="floor3" :floorName="floorName.floor3"></my-floor>
      <!-- 热卖商品 -->
      <my-hotgoods :hotgoods="hotgoods"></my-hotgoods>
    </van-pull-refresh>
  </div>
</template>
<script>
import mySearch from "./components/mySearch";
import mySwiper from "./components/mySwiper";
import myNavbar from "./components/myNavbar";
import myNotice from "./components/myNotice";
import myRecommend from "./components/myRecommend";
import myFloor from "./components/myFloor";
import myHotgoods from "./components/myHotgoods";

import { getIndexInfo } from "../../commonApi/request.js";
import { Toast } from 'vant';

export default {
  name: "home",
  components: {
    mySearch,
    mySwiper,
    myNavbar,
    myNotice,
    myRecommend,
    myFloor,
    myHotgoods
  },
  data() {
    return {
      value: "",
      isLoading: false,
      bannerImages: [],
      category: [],
      recommend: [],
      floor1: [],
      floor2: [],
      floor3: [],
      floorName: {},
      hotgoods: []
    };
  },

  // Proxy error: Could not proxy request /goods/getIndexInfo from localhost:8080 to http://vt.ossjk.com.
  // http://vt.ossjk.com/goods/getIndexInfo
  methods: {
    onSearch(arr) {
      for (let i = 0; i < arr.length; i++) {
        arr[i].image = arr[i].image.toString().replace(/oa/, "imgs");
      }
      return arr;
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.getIndexDatas();
        this.isLoading = false;
      }, 1000);
    },

    async getIndexDatas() {
      // var _self = this
      let { data } = await getIndexInfo();
      console.log(data);
      this.bannerImages = this.onSearch(data.data.slides);
      this.category = this.onSearch(data.data.category);
      this.recommend = this.onSearch(data.data.recommend);
      this.floor1 = this.onSearch(data.data.floor1);
      this.floor2 = this.onSearch(data.data.floor2);
      this.floor3 = this.onSearch(data.data.floor3);
      this.floorName = data.data.floorName;
      this.hotgoods = this.onSearch(data.data.hotGoods);
      console.log(this.hotgoods);
    }
  },
  created() {
    this.getIndexDatas();
  }
};
</script >
<style>
#myhome {
  padding-bottom: 50px;
  background-color: #f0f0f0;
}
</style>